<template>


  <div class="mod">
    <h1 class="mod_h1"><font color="white">签到管理系统</font></h1>

  </div>
  <div class="login_mod">
    <h1><font color="#5887f7">登录</font></h1>
    <div class="wrapper_input">
      <input class="input" placeholder="账号" v-model="data.username"/>
      <input class="input" placeholder="密码" v-model="data.password"/>
      <input class="login" type="submit" value="登录" @click="handleLogin">
      <div class="yz"><font color="grey"><a href="register">没有账号？点击注册</a></font></div>
      <ToastView v-if="data.showToast" v-bind:message="data.toastMessage" />
    </div>
  </div>

</template>

<script>
import {useRouter} from 'vue-router';
import axios from 'axios';
import { reactive,ref ,computed} from 'vue';
import ToastView from "@/components/ToastView";
import store from "@/store";
import TheFooter from "@/components/ToastView";
axios.defaults.headers.post['Content-Type']='application/json'
export default {
  name: "LoginView.vue",
  components: {TheFooter, ToastView},
  setup(){
    const ncname = ref();
    ncname.value={};
    const userinfo =ref({});
    const data = reactive({
      username:'',
      password:'',
      showToast:false,
      toastMessage:'',
      trueorfalse:false
    })
    const router = useRouter();
    const changeToast = (message) => {
      data.showToast = true;
      data.toastMessage = message;
      setTimeout(() => {
        data.showToast = false;
        data.toastMessage = '';
      },5000)
    };
    const handleRegister = () => {
      router.push( {name: 'register'})
    }
    const handleLogin = () => {
      try{
        axios.post('http://localhost:8090/login',{
          loginName:data.username,
          password:hexMd5(data.password + KEY)
        }).then((resp) =>{
          if(resp.data.success){
            data.trueorfalse =resp.data.success;
            ncname.value=resp.data.content.name;
            userinfo.value =resp.data.content;
            store.commit("setUserName",ncname.value);
            store.commit("setUserInfo",userinfo.value);
            console.log(ncname.value)
            console.log(userinfo.value)
            //登录成功
            changeToast('登录成功');
            setTimeout(() => {
              router.push({name: 'Index'});
            }, 1000);

          }else{
            changeToast('用户名或密码错误');
          }

        }).catch((err) =>{
          console.log(err);
          changeToast('登录失败');
        })
      }catch (e){
        changeToast('请求失败');
      }
    };
    const user2 = computed(() => { return store.state.username; })
    return {
      handleLogin,data,handleRegister,user2
    }
  }
}
</script>

<style scoped>

.mod {
  position: fixed;
  height: 50%;
  width: 100%;
  background: #5887f7;

}
.mod_h1{
  position: fixed;
  top:40%;
  left: 20%;
  font-size: 250%;
}
.login_mod{

  width: 288px;
  height: 326px;
  background: rgba(255, 255, 255, 1);
  /*加阴影*/
  box-shadow: 0px 2px 30px rgba(79, 79, 79, 0.3);
  /*圆角*/
  border-radius: 19px;

  position: fixed;
  left: 40%;
  right: 0px;
  bottom: 0px;
  top: -10%;
  margin: auto;
}
.wrapper_input{
  width: 86%;
  position: relative;
  margin-bottom: 30px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}
.input{
  height: 25px;
  margin-top: 18px;
  border: none;
  outline: none;
  margin-left: 18px;
  /*下划线*/
  box-shadow: 0px 1px 0px rgba(79, 79, 79, 0.3);
}
.login{
  height: 32px;
  width: 60%;
  margin-top: 40px;
  margin-right: auto;
  margin-bottom: 0px;
  border-radius: 4px;
  margin-left: auto;
  border: none;
}
.yz{
  margin-top: 18px;
  height: auto;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;

}
</style>